import React from 'react';
import DataTable from '../../UI/DataTable';
import PageContainer from '../../UI/PageContainer';
import './PatentPage.css';

const PatentPage = () => {
  const data = [
    {
      id: 1,
      title: '一种基于深度学习的图像识别方法',
      patentNumber: 'CN202310123456.7',
      inventors: '张三, 李四',
      applicant: '某某大学',
      patentType: '发明专利',
      status: '已授权',
      applicationDate: '2023-01-15',
      publicationDate: '2023-04-15',
      grantDate: '2023-08-20',
      field: '人工智能',
      description: '本发明公开了一种基于深度学习的图像识别方法...',
      files_patentDocument: [
        { name: '专利说明书.pdf', size: 5120000, type: 'application/pdf' },
        { name: '权利要求书.pdf', size: 1024000, type: 'application/pdf' }
      ],
      files_attachment: [
        { name: '技术图纸.dwg', size: 2048000, type: 'application/dwg' },
        { name: '实施例说明.docx', size: 1536000, type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }
      ]
    },
    {
      id: 2,
      title: '一种智能语音识别系统',
      patentNumber: 'CN202310789012.3',
      inventors: '王五, 赵六',
      applicant: '某某科技公司',
      patentType: '发明专利',
      status: '审查中',
      applicationDate: '2023-03-10',
      publicationDate: '2023-06-10',
      grantDate: null,
      field: '人工智能',
      description: '本发明涉及一种智能语音识别系统...',
      files_patentDocument: [
        { name: '专利申请文件.pdf', size: 4096000, type: 'application/pdf' }
      ],
      files_attachment: [
        { name: '算法流程图.png', size: 1024000, type: 'image/png' },
        { name: '测试报告.pdf', size: 2048000, type: 'application/pdf' }
      ]
    }
  ];

  const stats = [
    { value: 2, label: '专利总数' },
    { value: 1, label: '已授权' },
    { value: 1, label: '审查中' }
  ];

  const columns = [
    {
      key: 'title',
      title: '专利名称',
      width: '250px',
      render: (value, row) => (
        <div>
          <div className="patent-page__title">{value}</div>
          <div className="patent-page__abstract">{row.description}</div>
        </div>
      )
    },
    { key: 'patentNumber', title: '专利号', width: '150px' },
    { key: 'inventors', title: '发明人', width: '120px' },
    { key: 'applicant', title: '申请人', width: '120px' },
    {
      key: 'patentType',
      title: '专利类型',
      width: '100px',
      render: (value) => (
        <span className="patent-page__type-badge">{value}</span>
      )
    },
    {
      key: 'status',
      title: '专利状态',
      width: '100px',
      render: (value) => (
        <span className={`patent-page__status-badge patent-page__status-badge--${value === '已授权' ? 'granted' : 'pending'}`}>
          {value}
        </span>
      )
    },
    { key: 'applicationDate', title: '申请日期', width: '100px' },
    { key: 'publicationDate', title: '公开日期', width: '100px' },
    { key: 'grantDate', title: '授权日期', width: '100px' },
    { key: 'field', title: '技术领域', width: '120px' },
    {
      key: 'actions',
      title: '操作',
      width: '120px',
      render: () => (
        <div>
          <a className="data-table__action-link data-table__action-link--edit">编辑</a>
          <a className="data-table__action-link data-table__action-link--delete">删除</a>
        </div>
      )
    }
  ];

  return (
    <PageContainer className="patent-page">
      <DataTable
        data={data}
        columns={columns}
        showSearch={true}
        title="专利"
        titleIcon="patent"
        editType="patent"
        searchPlaceholder="搜索专利号、标题、作者..."
        filterOptions={['已授权', '审查中', '已驳回']}
        onNew={() => console.log('新建专利')}
        onFilter={() => console.log('筛选专利')}
        showPagination={true}
        pageSize={20}
        className="patent-page__table"
      />
    </PageContainer>
  );
};

export default PatentPage;
